<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
		}
		#mycanvas canvas, #mycanvas div{
			background-color:#fff;
			margin:0 auto;		
		}
		/*div.jm-tooltip {
			background-color: rgba(255,255,255,0.8);
			padding:4px;
			border:1px solid #000;
			box-shadow: 0 0 3px #000;
			border-radius: 6px;
		}*/
		</style>
		<script type="module">
			
			import { jmChart } from '../dist/jmchart.esm.js';

			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.8, 600);
				var h = Math.max((window.innerHeight || window.document.body.clientHeight) * 0.4, 400);			
				inichart(w, h);
			})();
			

			function inichart(w, h) {
					var chart1 = new jmChart('mycanvas1', {
						width: w,
						height: h,
						enableAnimate: true,
						autoRefresh: true,
                        style: {
							markLine: false, // 不展示标线
							margin: {
								left: 200,
								top: 100,
								right: 200,
								bottom: 100
							}
                        }
                    });
					
					var pie1 = chart1.createSeries('pie', {
						field: 'y1',
						startAngle: function(data) {
							const step = Math.abs(data[0].y1 / this.totalValue);
							return Math.PI/2 - step * Math.PI;// 当前占的角度的一半加上偏移要刚好等于90度
						},//10,
						anticlockwise: false, //是否逆时针
						legendFormat: function(options) {
							return 'test' + options.data.x;
						},
						itemLabelFormat: function(point) {
							//return (point.step * 100).toFixed(2) + '%';
							//return point.data.name;
							const label = this.graph.createShape('label', {
								style: this.style.label,
								text: point.data.name,
								position: function() {
									
									// 动态计算位置
									const parentRect = this.parent.getBounds();

									// 圆弧的中间位，离圆心最近和最完的二个点
									let centerMaxPoint = this.parent.points[Math.floor(this.parent.points.length / 2)];
									// 如果是空心圆，则要计算 1/4 和 3/4位的点。顺时针和逆时针二个点大小不一样，这里只取，大小计算时处理
									if(point.shape.style.isHollow) {
										centerMaxPoint = this.parent.points[Math.floor(this.parent.points.length * 0.75)];
									}

									const size = this.testSize();
									const offset = 100;
									const position = {
										x: 0,
										y: 0
									};

									position.x = (centerMaxPoint.x - this.parent.center.x) / this.parent.radius * offset + centerMaxPoint.x - parentRect.left;
									position.y = (centerMaxPoint.y - this.parent.center.y) / this.parent.radius * offset + centerMaxPoint.y - parentRect.top;
									return position;
								}
							});
							return label;
						},
						/*radius: function(p, radius, index) {
							if(p.data.selected) {
								return radius + 10;
							}
							return radius;
						},*/
						minRadius: function(p, r, i) {
							if(p.data.selected) {
								return r + 10;
							}
							return r;
						},
						maxRadius: function(p, r, i) {
							if(p.data.selected) {
								return r + 10;
							}
							return r;
						},
						center: function(p, center, index) {
							// 如果被选中
							if(p.data.selected) {
								// 根据中心角度，偏移离中心偏移一个量
								const mradius = 10;
								// 逆时针需要反过来
								const angle = ((p.endAngle - p.startAngle) / 2 + p.startAngle) * (p.anticlockwise? 1: -1);
								if(angle !== 0) {
									return {
										x: center.x + Math.cos(angle) * mradius,
										y: center.y - Math.sin(angle) * mradius
									}
								}
							}
							return center;
						},
						// 点击事件
						onClick: function(point, e) {							
							refreshData(point.data.name);
						},
						// 图初始化回调
						onInit: function(center, radius) {
							const label1 = this.graph.createShape('label', {
								style: {
									stroke: '#effaaa',
									fill: 'red',
									textAlign: 'right',
									textBaseline: 'middle',
									fontFamily: "Arial",
									fontSize: 24,
									shadow: '0,0,10,#fff'
								},
								text: '2个',
								center: {
									x: center.x,
									y: center.y - 10
								}
							});
							this.addShape(label1);
							const label2 = this.graph.createShape('label', {
								style: {
									stroke: '#effaaa',
									fill: '#000',
									textAlign: 'right',
									textBaseline: 'middle',
									font: "normal bold 20px Arial",
									//fontSize: 40,
									shadow: '0,0,10,#fff'
								},
								text: '资产分布',
								center: {
									x: center.x,
									y: center.y + 15
								}
							});
							this.addShape(label2);
						},
						/*onOver: function(point, e) {
							point.data.overColor = '#D8E404';
							this.needUpdate = true;

							// 每隔一段时间检查是否在图形上，否则认为离开
							clearTimeout(point.data.___event_check_handler);
							point.data.___event_check_handler = setTimeout(() => {
								if(point.data.overColor) {
									point.data.overColor = '';
									this.needUpdate = true;
								}
							}, 200);
						},
						onLeave: function(point, e) {
							point.data.overColor = '';// 去除当前色
							this.needUpdate = true;
						},*/
						style: {
							isHollow: true, // 是否空心
							arcWidth: 30, // 圆弧宽
							marginAngle: 0.02,// 间隔角度
							// 指定颜色获取方式，不指定就会使用默认的
							color: function(point) {	
								if(!point || !point.data) return;							
								const color = point.data.color || this.graph.getColor(point.x);
								if(!point.data.selected) {
								// 如果没有被选中，则给个透明度
									const colorRGBA = this.graph.utils.hexToRGBA(color);
                                    return `rgba(${colorRGBA.r},${colorRGBA.g},${colorRGBA.b}, 0.5)`;
                                }
								return color;
							},
							label: {
								show: true, // 默认就是true
								stroke: '#ccc',
								fill: 'blue',
								textAlign: 'center',
								textBaseline: 'middle',
								border: {
									top: true,
									left: true,
									right: true,
									bottom: true,
									style: {
										fill: '#000'
									}
								}
							}
						}
					});
					
					var chart2 = new jmChart('mycanvas2', {
						width: w,
						height: h,
						enableAnimate: true,
						autoRefresh: true,// 启用动画，建议指定自动动画，否则需要自已写刷新代码
                        style: {
							markLine: false, // 不展示标线
							// 指定一个渐变的样式，这里也可以不指定，会用默认的
                            chartColors: [
								`radial-gradient(50% 50% 0 50% 50% 100%, 
												#42a4ff 0, 
												#62A2E0 0.5,
												#0D64B7 1)`,
								`radial-gradient(50% 50% 0 50% 50% 100%, 
												#fa7d7d 0, 
												#F2ADB2 0.5,
												#fa7d7d 1)`,
								`radial-gradient(50% 50% 0 50% 50% 100%, 
												#007aff 0, 
												#6CA7E8 0.5,
												#054893 1)`
							]
                        }
                    });
					
					var pie2 = chart2.createSeries('pie', {
						field: 'y1',
						anticlockwise: true, //是否逆时针
						legendFormat: function(options) {
							return 'test' + options.data.x;
						},
						itemLabelFormat: function(point) {
							return point.data.name + ':' + (point.step * 100).toFixed(2) + '$';
						},
						/*radius: function(p, radius, index) {
							if(p.data.name === 'test0') {
								return radius + 20;
							}
							return radius;
						},*/
						center: function(p, center, index) {
							if(p.data.name === 'test1') {
								// 根据中心角度，偏移离中心偏移一个量
								const mradius = 20;
								// 逆时针需要反过来
								const angle = ((p.endAngle - p.startAngle) / 2 + p.startAngle) * (p.anticlockwise? 1: -1);
								if(angle !== 0) {
									return {
										x: center.x + Math.cos(angle) * mradius,
										y: center.y - Math.sin(angle) * mradius
									}
								}
							}
							return center;
						},
						style: {
							isHollow: false, // 是否空心
							marginAngle: 0,// 间隔角度
							arcWidth: 50 // 空心时，圆弧的宽度, 不指定就默认20%半径
						}
                    });
                    
					const datacount = 4;

					// 把圆分成一百份，  只有选中的第一个才点半圆 50
					const otherNum = 50 / (datacount - 1);
					const selectNum = 50;

					let data1 = [
						{
							x : 0,
							name: 'test1',
							color: '#249FDA',
							y1 :  selectNum,
							selected: true
						},
						{
							x : 1,
							name: 'test2',
							color: '#EA3B7C',
							y1 :  otherNum
						},
						{
							x : 2,
							name: 'test3',
							color: '#8EBC00',
							y1 :  otherNum
						},
						{
							x : 3,
							name: 'test4',
							color: '#309B46',
							y1 :  otherNum
						}
					];	

					function refreshData(selectName) {
						// 选择没有改变，不处理
						if(selectName === data1[0].name) return;

						// 第一个图，当选中某个项后，它移到第一个，其它项顺移
						const data1Tmp = [];
						for(let i=0; i<data1.length; i++) {
							data1[i].selected = false;
							if(data1[i].name == selectName) {
								data1Tmp.push(data1[i]);
								data1[i].y1 = selectNum;
								
								for(let j=i+1;j<data1.length;j++) {
									data1[j].y1 = otherNum;
									data1Tmp.push(data1[j]);
								}
								for(let j=0;j<i;j++) {
									data1[j].y1 = otherNum;
									data1Tmp.push(data1[j]);
								}

								data1[i].selected = true;
								break;
							}
						}
						if(data1Tmp.length) data1 = data1Tmp;
						// 默认选中第一个
						if(!selectName) {
							data1[0].selected = true;
						}

						chart1.data = data1;
						chart1.refresh(); 

						
						const data2 = [];
						for(let i=0; i< datacount;i++) {
							data2.push({
								x : i,
								name: 'test' + i,
								y1 :  Math.random() * 100
							});
						}
						chart2.data = data2;
						//setTimeout(animate,500);
						// 默认刷新一次
						chart2.refresh();

						console.log(chart1.data);
					}

					
					refreshData();

					chart1.utils.bindEvent(document.getElementById('btnRedraw'),'click', refreshData);
					
					// // 自动刷新代码
					// function update() {
					// 	if(chart1.needUpdate) chart1.redraw();
					// 	requestAnimationFrame(update);
					// }
					// requestAnimationFrame(update);
				}
		</script>
	</head>
	<body>
		<div id="mycanvas1">
			</div>
		<div id="mycanvas2">
			</div>	
			<button id="btnRedraw">重绘</button>		
	</body>
</html>